<template>
  <div class="patient">
    <div class="search-box">
      <Form inline :label-width="80">
        <FormItem label="ID">
          <Input type="text" v-model="id" placeholder="ID">
          </Input>
        </FormItem>
        <FormItem label="检索条件">
          <Select v-model="paramName" style="width:100px" clearable>
            <Option value="name">姓名</Option>
          </Select>
          <Input type="text" v-model="value" placeholder="" style="width:200px">
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="doSearch">搜索</Button>
          <Button type="warning" @click="historySearch">历史版本</Button>
        </FormItem>
      </Form>
    </div>
    <div class="opt">
      <Button type="primary" @click="doSearch">刷新</Button>
      <Button type="success" @click="add">新增</Button>
    </div>
    <div class="data-table">
      <Table border :columns="columns" :data="tableData" size="small" :loading="tableLoading"></Table>
    </div>

    <Drawer
      :title="title"
      v-model="showEdit"
      width="720"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="editData" :label-width="80">
        <FormItem label="姓名" prop="patientName">
          <Input v-model="editData.patientName"/>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <Select v-model="editData.sex">
            <Option value="male">男</Option>
            <Option value="female">女</Option>
            <Option value="other">其他</Option>
            <Option value="unknown">未知</Option>
          </Select>
        </FormItem>
        <FormItem label="电话" prop="telphone">
          <Input v-model="editData.telphone"/>
        </FormItem>
        <FormItem label="出生日期" prop="birthDate">
          <DatePicker type="date" v-model="editData.birthDate"/>
        </FormItem>
        <FormItem label="出生时间" prop="birthTime">
          <DatePicker type="datetime" v-model="editData.birthTime"/>
        </FormItem>
        <FormItem label="身份证号" prop="identityNo">
          <Input v-model="editData.identityNo"/>
        </FormItem>
        <FormItem label="社保卡号" prop="insuranceNo">
          <Input v-model="editData.insuranceNo"/>
        </FormItem>
        <FormItem label="家庭地址" prop="homeAddr">
          <Input v-model="editData.homeAddr"/>
        </FormItem>
        <FormItem label="邮编" prop="zipCode">
          <Input v-model="editData.zipCode"/>
        </FormItem>
        <FormItem label="联系人" prop="contact">
          <Input v-model="editData.contact"/>
        </FormItem>
        <FormItem label="联系人关系" prop="relationShip">
          <Input v-model="editData.relationShip"/>
        </FormItem>
        <FormItem label="联系人电话" prop="contactPhone">
          <Input v-model="editData.contactPhone"/>
        </FormItem>
      </Form>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" type="primary" @click="onSubmit">确定</Button>
        <Button type="error" @click="showEdit = false">取消</Button>
      </div>
    </Drawer>


  </div>
</template>

<script>

  export default {
    name: "patient",

    computed: {
      tableData() {
        let jData = [];
        this.$store.state.patient.patientList.forEach(entry => {
          let re = entry.resource;
          if (re.total && re.total.myStringValue == '0')
            return;

          jData.push({

            url: re.id.myStringValue,
            id: re.id.myUnqualifiedId,
            versionId: re.id.myUnqualifiedVersionId,
            patientName: (re.name && re.name[0].text) ? re.name[0].text.myStringValue : "",
            identityNo: (re.identifier && re.identifier[0] && re.identifier[0].value) ? re.identifier[0].value.myStringValue : "",
            insuranceNo: (re.identifier && re.identifier[1] && re.identifier[1].value) ? re.identifier[1].value.myStringValue : "",
            telphone: (re.telecom && re.telecom[0].value) ? re.telecom[0].value.myStringValue : "",
            sex: re.gender ? re.gender.myStringValue : "",
            birthDate: re.birthDate ? re.birthDate.myStringValue : "",
            birthTime: re.extension ? re.extension[0].value.myStringValue : "",
            homeAddr: (re.address && re.address[0].text) ? re.address[0].text.myStringValue : "",
            zipCode:  (re.address && re.address[0].postalCode)   ?  re.address[0].postalCode.myStringValue :"",
            contact: (re.contact && re.contact[0].name.text) ? re.contact[0].name.text.myStringValue : "",
            relationShip: (re.contact && re.contact[0].relationship[0].text) ? re.contact[0].relationship[0].text.myStringValue : "",
            contactPhone: (re.contact && re.contact[0].telecom[0].value) ? re.contact[0].telecom[0].value.myStringValue : ""
          })
        })
        return jData;
      }
    },
    data() {
      return {
        type: 'Patient',
        id: null,
        paramName: null,
        value: null,
        tableLoading: false,
        showEdit: false,
        isUpdate: false,
        title: '',
        editData: {},
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        columns: [
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '版本',
            key: 'versionId'
          },
          {
            title: '姓名',
            key: 'patientName'
          },
          {
            title: '身份证号',
            key: 'identityNo'
          },
          {
            title: '社保卡号',
            key: 'insuranceNo'
          },
          {
            title: '联系电话',
            key: 'telphone'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '出生日期',
            key: 'birthDate'
          },
          {
            title: '出生时间',
            key: 'birthTime'
          },
          {
            title: '家庭住址',
            key: 'homeAddr'
          },
          {
            title: '邮编',
            key: 'zipCode'
          },
          {
            title: '联系人',
            key: 'contact'
          },
          {
            title: '联系人关系',
            key: 'relationShip'
          },
          {
            title: '联系人电话',
            key: 'contactPhone'
          },
          {
            title: "操作",
            width: 120,
            type: "render",
            render: (h, params) => {
              return h('div', {
                class: 'btn-wrap'
              }, [
                h('a', {
                  on: {
                    click: () => {
                      this.update(params.row)
                    }
                  }
                }, '编辑'),
                h('Divider', {
                  props: {type: 'vertical'},
                }),
                /*h('a', {
                  on: {
                    click: () => {
                      this.update(params.row)
                    }
                  }
                }, '消息'),
                h('Divider', {
                  props: {type: 'vertical'},
                }),*/
                h('a', {
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, '删除'),
              ])
            }
          }
        ]
      }
    },
    created() {
      this.doSearch();
    },
    methods: {
      doSearch() {
        this.tableLoading = true;
        this.$store.dispatch('getPatientList', {
          type: 'Patient',
          id: this.id,
          paramName: this.paramName,
          value: this.value,
        }).then(() => {
          this.tableLoading = false;
        }).catch(res => {
          this.$Notice.error({
            title: res.error,
            desc: res.message
          });
          this.tableLoading = false;
        })
      },
      historySearch() {
        if (!this.id) {
          this.$Message.error('请输入ID');
          return;
        }
        this.tableLoading = true;
        this.$store.dispatch('getHistoryPatientList', {
          type: 'Patient',
          id: this.id,
        }).then(() => {
          this.tableLoading = false;
        })
      },
      add() {
        this.editData = {
          patientName: "刘康",
          identityNo: "110101200301120019",
          insuranceNo: "100000000000",
          telphone: "13800138000",
          sex: "male",
          birthDate: "2003-01-12",
          birthTime: "2003-01-12 09:12:35",
          homeAddr: "北京市东城区景山前街4号",
          zipCode: "100010",
          contact: "刘勇",
          relationShip: "父亲",
          contactPhone: "13012345678",
        };
        this.showEdit = true;
        this.isUpdate = false;
        this.title = '新增患者';
      },
      update(row) {
        this.editData = JSON.parse(JSON.stringify(row));
        this.showEdit = true;
        this.isUpdate = true;
        this.title = '更新患者';
      },
      remove(row) {
        this.$store.dispatch('deletePatient', {
          type: 'Patient',
          id: row.id
        }).then(() => {
          this.$Message.success('删除成功');
          this.id = row.id;
          this.doSearch();
        });
      },
      onSubmit() {
        if (this.isUpdate) {
          this.$store.dispatch('updatePatient', Object.assign({type: 'Patient'}, this.editData)).then(() => {
            this.$Message.success('更新成功');
            this.showEdit = false;
            this.id = this.editData.id;
            this.doSearch();
          });
        } else {
          this.$store.dispatch('createPatient', Object.assign({type: 'Patient'}, this.editData)).then((res) => {
            this.$Message.success('新增成功');
            this.showEdit = false;
            this.id = res.data.myId.myUnqualifiedId;
            localStorage.setItem('patientId',this.id)
            this.doSearch();
          });
        }
      }
    }
  }
</script>

<style scoped>
  .data-table {
    margin-top: 10px;
  }

  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
